<template>
<div class="box">
    <el-empty style="width: 100%;" description="暂无数据" v-if="data.tableData.length === 0" />
<div style="flex:1">
    <el-card class="list-box" shadow="hover" style="margin-bottom: 10px" v-for="(item,i) in data.tableData" :key="item.id">
        <img style="width:200px;height: 200px;"  :src="imgList[i%5]" alt=""/>
        <div class="box-card list-item">
        <div>姓名：{{ item.username }}</div>
        <div>比赛项目：{{ item.name}}</div>
        <div>评分人：{{ item.judgeName }}</div>
        <div>成绩：{{ item.score}}</div>
        <div>评价：{{ item.comment}}</div>
    </div>
    </el-card>
    
   
<!-- <div style="margin-top: 25px">
<el-pagination
    @size-change="load"
    @current-change="load"
    v-model:current-page="data.currentPage"
    v-model:page-size="data.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="data.total"
/>
</div>  -->
</div>
    <div class="ipt">
        <div class="form">
            <div style="width:120px">比赛项目：</div>
            <el-select v-model="competition" placeholder="请选择" style="width: 200px" >
                <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
        </div>
        <div class="form">
            <div style="width:120px">最高分：</div>
            <el-input v-model="maxScore" disabled style="width: 200px"/>
        </div>
        <div class="form">
          <div style="width:120px">最高分参赛者：</div>
          <div style="width: 200px;text-align: left;">
            <el-tag style="margin-right: 5px;" type="primary" v-for="item in maxUsers" :key="item.id">{{ item.username }}</el-tag>
          </div>
        </div>
        <div class="form">
            <div style="width:120px">平均分：</div>
            <el-input v-model="avgScore" disabled style="width: 200px"/>
        </div>

        <el-button class="button" type="success" style="width: 90px;"  @click="loadByName()">计算</el-button>

    </div>
</div>
  </template>
  
  <script setup>
  import {reactive, ref} from "vue";
  import {Delete, Edit, Search} from "@element-plus/icons-vue";
  import request from "@/utils/request.js";
  import {ElMessage, ElMessageBox} from "element-plus";
  import img1 from '@/assets/01.jpeg'
  import img2 from '@/assets/02.jpeg'
  import img3 from '@/assets/03.jpeg'
  import img4 from '@/assets/04.jpeg'
  import img5 from '@/assets/05.jpeg'
const imgList = [img1,img2,img3,img4,img5]
// 待定、已批准、已拒绝、已取消
const statusList =ref([
    {label:'待定',value:'PENDING',type:'warning'},
    {label:'已批准',value:'APPROVED',type:'success'},
    {label:'已拒绝',value:'REJECTED',type:'danger'},
    {label:'已取消',value:'CANCELLED',type:'danger'},
]) 
  
  const user = ref(JSON.parse(localStorage.getItem('user'))) 
  const data = reactive({
    username: '',
    comment:'',
    form: {},
    tableData: [],
    currentPage: 1,
    pageSize: 999,
    total: 0,
    FormVisible: false,
    ids: [],
  })
const competition = ref('')
const maxScore = ref('')
const avgScore = ref('')
const maxUsers = ref([])
  const loadByName =()=> {
    let row = typeList.value.find(item => item.id === competition.value)
    request.get('/Score/selectMaxAndAvg', {
      params: {
        ...row,
        userId:  user.value.id 
      }
    }).then(res => {
      maxScore.value = res.data?.maxScore
      avgScore.value = res.data?.avgScore

      request.get('/Score/selectMaxScoreParticipant', {
      params: {
        // 参数？？
        eventId:row.eventId,
        score:  maxScore.value
      }
    }).then(data => {
      console.log(1111111111,data)
      maxUsers.value = data.data
    })





    })
  }
  const typeList = ref([])
  const getTypeList = () => {
    request.get('/Score/selectScoreGroupByEvent').then(res => { 
        typeList.value = res.data.list  
    })
  }
  getTypeList()
  const load = () => {
    request.get('/Score/selectScore', {
      params: {
        pageNum: data.currentPage,
        pageSize: data.pageSize,
        comment: data.comment,
        role: 'PARTICIPANT', // 只查询参赛者
        userId: user.value.role =="PARTICIPANT"? user.value.id : null
      }
    }).then(res => {
      data.tableData = res.data.list;
      data.total = res.data.total;
    })
  
  }
  
  load()
  
  const reset = () => {
    data.username = '';
    load()
  }
  
  //新增
  const hadleNewracer = () => {
    data.FormVisible = true;
    data.form = {};//新增时清空表单，防止上一次数据残留
  }
  
  // 新增 和 保存信息
  const save = () => {
    data.form.id ? update() : add()//id有值跟新，无添加
  }
  
  const add = () => {
    request.post("/Score/add", data.form).then(res => {
      if (res.code === '200') {
        ElMessage.success("操作成功")
        data.FormVisible = false; //添加后 关闭对话框
        load()
      } else {
        ElMessage.error(res.msg)
      }
  
    })
  }
  
  const update = () => {
    let userId = JSON.parse(localStorage.getItem('user'))
    request.put("/Score/update", {...data.form,judgeId:userId.id}).then(res => {
      if (res.code === '200') {
        ElMessage.success("操作成功")
        data.FormVisible = false; //更新后 关闭对话框
        load()
      } else {
        ElMessage.error(res.msg)
      }
  
    })
  }
  
  
  // 数据编辑
  const handleUpdate = (row) => {
    data.form = JSON.parse(JSON.stringify(row))//深拷贝，不直接data.from=row,此时会直接修改
    data.FormVisible = true
  }
  
  // 数据删除
  const handleDelete = (id) => {
    ElMessageBox.confirm('您确认删除评分信息吗', '删除确认', {type: "warning"}).then(() => {
      request.delete(`/Score/${id}`).then(res => {
        if (res.code === '200') {
          ElMessage.success("操作成功")
          data.FormVisible = false; //删除后 关闭对话框
          load()
        } else {
          ElMessage.error(res.msg)
        }
  
      })
    }).catch()
  
  }
  
  const handleSelectionChange = (rows) => {//返回所有选中的行对象数组
  
    //从选中行数组里的里面取出所有行的id组成一个新的数组
    data.ids = rows.map(row => row.id)
  }
  
  const deleteBatch = () => {
    if (data.ids.length === 0) {
      ElMessage.warning('请选择数据')
      return
    }
    ElMessageBox.confirm('您确认删除', '删除确认', {type: "warning"}).then(() => {
      request.delete('/user/deleteUserByIdBatch', {data: data.ids}).then(res => {
        if (res.code === '200') {
          ElMessage.success("操作成功")
          data.FormVisible = false; //删除后 关闭对话框
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }).catch()
  
  }
  
  </script>
  
  <style scoped>
    .list-box{
    /* width: 100%; */
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    width: 300px;
}
  .list-item{
    padding-right: 50px;
    box-sizing: border-box;
    height: 240px;
    line-height: 40px;
    width: 300px;

  }
    .box{

            display: flex;
        
    }

    .ipt{
        margin-bottom: 10px;
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    .button{
        margin: 0 !important;
    }
    .form{
        display: flex;
        align-items: center;
    }
    .form>div{
      text-align: right;
    }
  </style>
  